<template>
  <el-drawer title="人员选择" :visible.sync="innerValue" direction="rtl" append-to-body @open="onDrawerOpen">
    <div class="content p-[32px]">
      <div class="h-full">
        <div class="flex h-[40px] leading-10">
          <div class="w-[100px] shrink-0">选择人员</div>
          <el-input v-model="filterText" class="flex-1" clearable></el-input>
        </div>
        <div class="content-tree flex overflow-auto">
          <div class="w-[100px] shrink-0"></div>
          <div class="mytree mt-[10px] flex-1 overflow-auto">
            <el-tree
              ref="myTree"
              :data="treeData"
              :props="treeProps"
              node-key="id"
              class="h-full pl-[10px] pt-[10px]"
              highlight-current
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
    <footer class="common-drawer-footer">
      <t-button class="common-search-btn" type="primary" @click="onSubmit">确 定</t-button>
      <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
    </footer>
  </el-drawer>
</template>

<script>
import vModelMixin from "@/mixin/v-model";
import { convertToTree } from "@/util";
const { clone } = require("xe-utils");
export default {
  name: "RadioSelection",
  mixins: [vModelMixin],
  props: {
    tranTreeProps: {
      type: Array,
      require: true,
      // default: () => {
      //   return [
      //     { parentId: null, id: 1, name: "信息部" },
      //     { parentId: 1, id: 2, name: "信息部-1" },
      //     { parentId: null, id: 3, name: "财务部" },
      //     { parentId: 3, id: 4, name: "财务部-1" },
      //     { parentId: 3, id: 5, name: "财务部-2" },
      //     { parentId: null, id: 6, name: "其他部门" },
      //     { parentId: 6, id: 7, name: "其他部门-2" },
      //   ];
      // },
    },
  },
  data() {
    return {
      filterText: "",
      treeProps: { children: "children", label: "name" },
      parentId: null,
      nodeId: null,
      treeData: [],
      treeDataInit: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.myTree.filter(val);
    },
  },
  methods: {
    onDrawerOpen() {
      this.treeDataInit = clone(this.tranTreeProps, true);
      this.treeData = convertToTree(this.tranTreeProps);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.treeProps.label].indexOf(value) !== -1;
    },
    handleNodeClick(node) {
      this.parentId = node.parentId;
      this.nodeId = node.id;
    },
    onSubmit() {
      const selectArr = this.treeDataInit.filter((item) => item.parentId && item.id == this.nodeId);
      console.log(selectArr);
      if (selectArr && selectArr.length) {
        this.$emit("on-submit", selectArr);
        this.innerValue = false;
      } else {
        this.$message.warning("请选择人员");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100% - 68px);

  .content-tree {
    height: calc(100% - 40px);
  }

  .mytree {
    border: 1px solid rgb(206 200 200);
  }
}
</style>
